<template>
  <div class="title">
    <img
      class="titleIcon"
      :src="`src/assets/imgs/repairWorkflow/${iconName}.png`"
    />
    <div class="titleText" v-if="title">{{ title }}</div>
    <slot slot="rightBase" class="rightBase"></slot>
  </div>
</template>

<script setup lang="ts">
import { getAssetsFile } from "@/utils";

const props = defineProps({
  title: { type: String, default: "" },
  iconName: { type: String, default: "" },
});
</script>

<style scoped lang="scss">
.title {
  position: relative;
  display: flex;
  align-items: center;
  width: 746px;
  max-width: 100%;
  height: 69px;
  background: url("@/assets/imgs/repairWorkflow/commonTitleIcon.png") 100% 100% /
    cover no-repeat;
  .titleIcon {
    width: 53px;
    height: 53px;
    margin: 0 15px 0 20px;
  }
  .titleText {
    user-select: none;
    font-family: YouSheBiaoTiHei;
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
  }
  .rightBase {
    align-items: flex-end;
    margin-right: 16px;
  }
}
</style>
